import React from 'react';
import './index.less'

import {ConfigProvider} from 'antd';

// 创建一个AppContext
const UserNameContext = React.createContext({});

function ContextDemo(props) {
    return (
        <>
            ContextDemo
            <hr/>
            <A/>
        </>
    );
}

function A(props) {

    const [name] = React.useState('"李华"');

    return (
        <div className={'a'}>
            <p>组件 name = {name}</p>
            {/* Provider 使用Context保存内容 */}
            <UserNameContext.Provider value={name}>
                <B/>
            </UserNameContext.Provider>
        </div>
    );
}

function B(props) {
    return (
        <div className={'b'}>
            <p>B组件</p>
            <C/>
        </div>
    );
}

function C(props) {

    // 读取Context内容
    const name = React.useContext(UserNameContext);

    // 这里读取APP的ConfigProvider内容
    const config = React.useContext(ConfigProvider.ConfigContext);

    return (
        <div className={'c'}>
            <p>C组件</p>
            <p>A组件传入的 name = {name}</p>
            <p>APP当前多语言 locale = {config.locale.locale}</p>
        </div>
    );
}

export default ContextDemo;
